<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>红包活动</title>

    <!----引入微信JS SDK--->
    <style type="text/css">
        #topdiv {
            position: absolute;
            top: 0px;
            left: 0;
            text-align: center;
            z-index: 9999;
            width: 100%;
            height: 100%;
            display: none;
            -webkit-user-select: none;
        }

        #topdiv img {
            max-width: 100%;
        }

        #shareit {
            -webkit-user-select: none;
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            text-align: center;
            top: 0;
            left: 0;
            z-index: 105;
        }

        #shareit img {
            max-width: 100%;
        }

        .arrow {
            position: absolute;
            right: 10%;
            top: 5%;
        }


        #share-text {
            margin-top: 400px;
        }
    </style>
    <script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        //编写分享代码
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '<%= appId %>', // 必填，公众号的唯一标识
            timestamp: '<%= timestamp %>', // 必填，生成签名的时间戳
            nonceStr: '<%= nonceStr %>', // 必填，生成签名的随机串
            signature: '<%= signature %>',// 必填，签名，见附录1
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        wx.ready(function () {
            // alert('dddd');
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            var sdata = {
                title: '【果然100新年见面礼】万元现金红包连发三天！',
                desc: '简介：传递好运，抢万元现金！',
                link: '<%=url%>',
                imgUrl: 'http://7xj380.com1.z0.glb.clouddn.com/hongbao_ico.png',
                success: function () {
                    //alert('用户确认分享后执行的回调函数');
                    $("#topdiv").show();
                    $("#jieshao").hide();

                },
                cancel: function () {
                    //alert('用户取消分享后执行的回调函数');
                }
            };
            wx.onMenuShareTimeline(sdata);
            wx.onMenuShareAppMessage(sdata);
        });

        wx.checkJsApi({
            jsApiList: ['onMenuShareTimeline'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function (res) {
                // 以键值对的形式返回，可用的api值true，不可用为false
                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

            }
        });
    </script>

</head>
<body style="margin: 0px">

<!-----------红包显示层------------->
<div id="topdiv">
    <img src="http://m.shiguo365.com/hongbao/hongbao.png">
</div>
<!--------分享提示箭头----->
<div id="shareit">
    <img class="arrow" src="/images/home/share-it.png">
    <a href="#" id="follow">
        <img id="share-text" src="http://dev.vxtong.com/cases/nuannan/imgs/share-text.png">
    </a>
</div>
<div id="jieshao">
    <!--<img src="/images/home/share_04.png" alt=""  style="width: 100%;display:block;" class="am-center" onclick="shareit()" id="share_btn"/>-->
    <img src="/images/activity/hongbao/_01.png"  style="width: 100%;display:block;"/>
    <a href="http://wxshop.guoran100.com/detail/621">
        <img src="/images/activity/hongbao/_02.png" style="width: 100%;display:block;"/>
    </a>
    <img src="/images/activity/hongbao/_03.png"  style="width: 100%;display:block;"/>
    <a href="http://wxshop.guoran100.com/detail/92">
        <img src="/images/activity/hongbao/_04.png" style="width: 100%;display:block;"/>
    </a>
    <a href="http://wxshop.guoran100.com/detail/282">
        <img src="/images/activity/hongbao/_05.png" style="width: 100%;display:block;"/>
    </a>
    <a href="http://wxshop.guoran100.com/detail/762">
        <img src="/images/activity/hongbao/_06.png" style="width: 100%;display:block;"/>
    </a>
    <a href="http://wxshop.guoran100.com/detail/877">
        <img src="/images/activity/hongbao/_07.png" style="width: 100%;display:block;"/>
    </a>
    <a href="http://wxshop.guoran100.com/detail/33">
        <img src="/images/activity/hongbao/_08.png"  style="width: 100%;display:block;"/>
    </a>
    <a href="http://wxshop.guoran100.com/detail/853">
        <img src="/images/activity/hongbao/_09.png"  style="width: 100%;display:block;"/>
    </a>
    <img src="/images/activity/hongbao/_10.png"  style="width: 100%;display:block;"/>
    <a href="http://guoran100.mikecrm.com/f.php?t=9H61YI">
        <img src="/images/activity/hongbao/_11.png"  style="width: 100%;display:block;"/>
    </a>
    <img src="/images/activity/hongbao/_12.png"  style="width: 100%;display:block;"/>
    <a href="http://wxshop.guoran100.com/pingou/">
        <img src="/images/activity/hongbao/_13.png"  style="width: 100%;display:block;"/>
    </a>
</div>
</body>
<script type="text/javascript">
    //立即分享到微信朋友圈点击事件
    function shareit() {
        $("#shareit").show();
        $('html, body').animate({scrollTop: 0}, 'slow');
    }
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;'  id='cnzz_stat_icon_1257404106'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/stat.php%3Fid%3D1257404106' type='text/javascript'%3E%3C/script%3E"));</script>
</html>